// 动态生成的文本表单组件
import { h, VNode } from 'vue';
import styles from '@/util/vnode_create_util/dynamic_common.module.scss';
import {
  BaseFormItemConfig,
  BaseFormItemConfigInterface
} from '@/util/vnode_create_util/dynamic_form_creator/dynamic_form_item_creator';
export interface TextFormItemConfigInterface<T> extends BaseFormItemConfigInterface<T> {
  props?: string;
  defaultSlot?: (formData: T) => VNode | string;
}

export class TextFormItemConfig<T> extends BaseFormItemConfig<T> implements TextFormItemConfigInterface<T> {
  props?: string;
  defaultSlot?: (formData: T) => VNode | string;

  createMethod (config: this, formData: T): VNode {
    return <div class={styles.common_input_text}
                key={`form${config.key ?? config.prop as string}`}
                onClick={() => config.onClick && config.onClick(formData)}>
      {config.defaultSlot ? config.defaultSlot(formData) : formData[config.prop]}
    </div>;
  }
}
